<template>
  <view class="invite-container">
    <!-- 邀请头部 -->
    <view class="invite-header">
      <image 
        src="https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" 
        mode="aspectFill" 
        class="header-image"
      ></image>
      <view class="header-overlay"></view>
      <view class="header-content">
        <text class="header-title">邀请好友</text>
        <text class="header-subtitle">邀请好友注册，双方各得奖励</text>
      </view>
    </view>
    
    <!-- 邀请奖励 -->
    <view class="reward-section">
      <view class="section-title">邀请奖励</view>
      <view class="reward-content">
        <view class="reward-item">
          <u-icon name="gift" size="40" color="#ff9900"></u-icon>
          <text class="reward-text">邀请奖励</text>
          <text class="reward-desc">好友注册即得20元优惠券</text>
        </view>
        <view class="reward-item">
          <u-icon name="gift" size="40" color="#007aff"></u-icon>
          <text class="reward-text">返利奖励</text>
          <text class="reward-desc">好友首次消费您可得10%返利</text>
        </view>
      </view>
    </view>
    
    <!-- 邀请方式 -->
    <view class="invite-methods">
      <view class="section-title">邀请方式</view>
      <view class="methods-grid">
        <view class="method-item" @click="shareToWechat">
          <view class="method-icon bg-green">
            <u-icon name="weixin-fill" size="40" color="#fff"></u-icon>
          </view>
          <text class="method-text">微信好友</text>
        </view>
        
        <view class="method-item" @click="shareToMoments">
          <view class="method-icon bg-blue">
            <u-icon name="moments" size="40" color="#fff"></u-icon>
          </view>
          <text class="method-text">朋友圈</text>
        </view>
        
        <view class="method-item" @click="shareToQQ">
          <view class="method-icon bg-blue-light">
            <u-icon name="qq" size="40" color="#fff"></u-icon>
          </view>
          <text class="method-text">QQ好友</text>
        </view>
        
        <view class="method-item" @click="copyLink">
          <view class="method-icon bg-gray">
            <u-icon name="link" size="40" color="#fff"></u-icon>
          </view>
          <text class="method-text">复制链接</text>
        </view>
      </view>
    </view>
    
    <!-- 邀请记录 -->
    <view class="invite-records">
      <view class="section-title">邀请记录</view>
      <view class="records-list">
        <view class="record-item" v-for="(record, index) in inviteRecords" :key="index">
          <u-avatar :src="record.avatar" size="60"></u-avatar>
          <view class="record-info">
            <text class="record-name">{{ record.name }}</text>
            <text class="record-time">{{ record.time }}</text>
          </view>
          <view class="record-status">
            <u-tag :text="record.status" :type="record.statusType" size="mini" />
          </view>
        </view>
      </view>
    </view>
    
    <!-- 邀请规则 -->
    <view class="invite-rules">
      <view class="section-title">邀请规则</view>
      <view class="rules-content">
        <view class="rule-item">
          <text class="rule-number">1</text>
          <text class="rule-text">被邀请人需通过您的专属链接注册</text>
        </view>
        <view class="rule-item">
          <text class="rule-number">2</text>
          <text class="rule-text">被邀请人完成首次消费后，双方均可获得奖励</text>
        </view>
        <view class="rule-item">
          <text class="rule-number">3</text>
          <text class="rule-text">奖励将在满足条件后24小时内发放</text>
        </view>
        <view class="rule-item">
          <text class="rule-number">4</text>
          <text class="rule-text">如有任何疑问，请联系客服</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 邀请记录
const inviteRecords = ref([
  {
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
    name: '张三',
    time: '2023-05-15',
    status: '已注册',
    statusType: 'success'
  },
  {
    avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
    name: '李四',
    time: '2023-05-10',
    status: '已消费',
    statusType: 'primary'
  },
  {
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
    name: '王五',
    time: '2023-05-05',
    status: '已奖励',
    statusType: 'warning'
  }
])

// 分享到微信好友
const shareToWechat = () => {
  uni.showToast({ title: '分享到微信好友', icon: 'none' })
}

// 分享到朋友圈
const shareToMoments = () => {
  uni.showToast({ title: '分享到朋友圈', icon: 'none' })
}

// 分享到QQ
const shareToQQ = () => {
  uni.showToast({ title: '分享到QQ好友', icon: 'none' })
}

// 复制链接
const copyLink = () => {
  uni.setClipboardData({
    data: 'https://carwash.example.com/invite?code=ABC123',
    success: () => {
      uni.showToast({ title: '链接已复制', icon: 'success' })
    }
  })
}
</script>

<style lang="scss" scoped>
.invite-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.invite-header {
  position: relative;
  height: 300rpx;
  margin-bottom: 20rpx;
  
  .header-image {
    width: 100%;
    height: 100%;
  }
  
  .header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
  }
  
  .header-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 2;
    
    .header-title {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 20rpx;
    }
    
    .header-subtitle {
      font-size: 28rpx;
      color: rgba(255,255,255,0.9);
    }
  }
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  padding: 30rpx 20rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fff;
}

.reward-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .reward-content {
    display: flex;
    padding: 40rpx 20rpx;
    
    .reward-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .reward-text {
        font-size: 32rpx;
        color: #333;
        margin: 20rpx 0 10rpx;
      }
      
      .reward-desc {
        font-size: 24rpx;
        color: #999;
        text-align: center;
      }
    }
  }
}

.invite-methods {
  background-color: #fff;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .methods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    padding: 40rpx 20rpx;
    
    .method-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .method-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15rpx;
        
        &.bg-green {
          background-color: #07c160;
        }
        
        &.bg-blue {
          background-color: #007aff;
        }
        
        &.bg-blue-light {
          background-color: #1890ff;
        }
        
        &.bg-gray {
          background-color: #999;
        }
      }
      
      .method-text {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}

.invite-records {
  background-color: #fff;
  margin-bottom: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .records-list {
    padding: 20rpx;
    
    .record-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      
      .record-info {
        flex: 1;
        margin: 0 20rpx;
        
        .record-name {
          display: block;
          font-size: 30rpx;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .record-time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      &:last-child {
        border-bottom: none;
      }
    }
  }
}

.invite-rules {
  background-color: #fff;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  
  .rules-content {
    padding: 20rpx;
    
    .rule-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;
      
      .rule-number {
        width: 40rpx;
        height: 40rpx;
        background-color: #007aff;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        margin-right: 20rpx;
        flex-shrink: 0;
      }
      
      .rule-text {
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
      }
    }
  }
}
</style>